import QtQuick 2.6
import QtQuick.Layouts 1.2

import "../../Base/UiBase"
import "../../Base/Config"

Item {
    id: root

    property string page:"newest" // "community", "newest", "friends"

    width: parent.width
    height: 96 * Size.ratio

    Rectangle {
        anchors.fill: parent
        color: Color.main

        Rectangle {
            x: 135 * Size.ratio
            width: 450 * Size.ratio
            height: 66 * Size.ratio
            anchors {
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            radius: 10 * Size.ratio
            color: Color.mainDarker

            Item {
                z: 1
                anchors {
                    left: parent.left
                    verticalCenter: parent.verticalCenter
                }
                width: 150 * Size.ratio
                height: 66 * Size.ratio
                Text {
                    id: tcText
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
                    text: qsTr("圈子")
                    font.pixelSize: Size.largeFont

                    state: "deactived"
                    states: [
                        State {
                              name: "actived"; when: root.page === "community"
                              PropertyChanges { target: tcText; color: "#4baff9" }
                          },
                        State {
                              name: "deactived"; when: root.page !== "community"
                              PropertyChanges { target: tcText; color: "#FFFFFF" }
                          }]
                    transitions: Transition {
                                NumberAnimation { properties: "x"; easing.type: Easing.InOutExpo; duration:1000 }
                            }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: page = "community"
                }
            }
            Item {
                z: 1
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    verticalCenter: parent.verticalCenter
                }
                width: 150 * Size.ratio
                height: 66 * Size.ratio
                Text {
                    id:newestText
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
                    text:qsTr("最新")
                    font.pixelSize: Size.largeFont
                    state: "actived";
                    states: [
                        State {
                              name: "actived"
                              when: root.page === "newest"
                              PropertyChanges { target: newestText; color: "#4baff9" }
                          },
                        State {
                              name: "deactived"
                              when: root.page !== "newest"
                              PropertyChanges { target: newestText; color: "#FFFFFF" }
                          }]
                    transitions: Transition {
                                NumberAnimation { properties: "x"; easing.type: Easing.InOutExpo; duration:1000 }
                            }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: page = "newest"
                }
            }
            Item {
                z: 1
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                width: 150 * Size.ratio
                height: 66 * Size.ratio
                Text {
                    id: friendsText
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
                    text: qsTr("好友")
                    font.pixelSize: Size.largeFont
                    state: "deactived"

                    states: [
                        State {
                              name: "actived"; when: root.page === "friends"
                              PropertyChanges { target: friendsText; color: "#4baff9" }
                          },
                        State {
                              name: "deactived"; when: root.page !== "friends"
                              PropertyChanges { target: friendsText; color: "#FFFFFF" }
                          }]
                    transitions: Transition {
                                NumberAnimation { properties: "x"; easing.type: Easing.InOutExpo; duration:1000 }
                            }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: page = "friends"
                }
            }
            Rectangle {
                id: whiteBlock
                color: "white"
                width: 150 * Size.ratio
                height: 66 * Size.ratio
                state: "deactived"
                radius: parent.radius
                states: [
                    State {
                          name: "actived"; when: root.page === "community"
                          PropertyChanges { target: whiteBlock; x: 0 }
                      },
                    State {
                          name: "deactived"; when: root.page === "newest"
                          PropertyChanges { target: whiteBlock; x: 150 * Size.ratio }
                      },
                    State {
                          name: "3"; when: root.page === "friends"
                          PropertyChanges { target: whiteBlock; x: 300 * Size.ratio }
                      }]
                transitions: Transition {
                            NumberAnimation { properties: "x"; easing.type: Easing.InOutExpo; duration:250 }
                        }
            }
        }
    }

    ImageButton {
        id: messagesButton
        anchors{
            right: parent.right
            verticalCenter: parent.verticalCenter
        }

        width: Size.ratio * 80
        height: Size.ratio * 96

        source: messageContext.visible ? "../../../resources/tcommunity/navBar/xinxi02.svg" : "../../../resources/tcommunity/navBar/xinxi01.svg"
        onClicked: messageContext.visible = !messageContext.visible
        MessageContext {
            id: messageContext
            visible: false
            anchors {
                top: parent.bottom
                right: parent.right
                rightMargin: 21 * Size.ratio
            }
        }
    }
}
